<template>
  <div style="padding-top: 5vw" class="layout2" >
    <el-form-item prop="email-code" :inline="true" style="float: right;padding-right: 1vw;" >
      <el-input v-model="search" placeholder="请输入内容" style="width: 20vw" clearable></el-input>
      <el-button type="primary" style="margin-left: 1vw" @click="load" >查询</el-button>
      <el-button type="primary" style="margin-left: 1vw" @click="add" v-if="this.formMsg.role==1||this.formMsg.role==2" >新增</el-button>
    </el-form-item>
  </div>
  <div class="layout2" style="height: 2vw">

  </div>
  <div style="padding-top: 2vw;margin-left: auto;margin-right: auto" class="layout2">
    <div style="padding-left: 2vw">
    <div v-for="(item) in tableData" key="item.id" style="margin-top: 1vw">
      <el-row style="padding-right: 1vw">
        <el-col :span="18"><p style="font-size: 2vw;font-weight: bolder;">{{item.title}}</p></el-col>
        <el-col :span="6" align="right" >
          <el-popconfirm title="确定删除吗" @confirm="handDelete(item.id)" v-if="this.formMsg.role==1||(this.formMsg.role==2&&item.author.indexOf(this.formMsg.nickName)==0)">
            <template #reference><el-button class="el-button1" size="1.5vw" >删除</el-button></template>
          </el-popconfirm>
          <el-button @click="handleEdit(item)" class="el-button1" size="1.5vw" v-if="this.formMsg.role==1||(this.formMsg.role==2&&item.author.indexOf(this.formMsg.nickName)==0)">编辑</el-button>
          <el-button @click="filesDownload(item.id)" class="el-button1" size="1.5vw">下载</el-button>
        </el-col>
      </el-row>
      <el-row :inline="true" style="font-size: 1vw;color:#767171;font-style: italic; padding-top: 0.3vw">
        <el-col :span="1" style="background-color:#DCDCDC; text-align: center">{{item.type}}</el-col>
        <el-col :span="2" style="font-size: 1vw;color:#767171;font-style: italic; margin-left: 1vw" >{{item.date}}</el-col>

        <el-col :span="10" style="line-height:100%;font-size: 1vw;color:#767171;font-style: italic; ">{{item.message}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="font-size: 1vw;color:#4E798C;padding-top: 0.3vw"><p style="font-size: 1vw">{{item.author}}</p></el-col>
      </el-row>
      <el-divider style="margin-top: 0.2vw;margin-bottom: 0px;border-style: solid;color: #294956"/>
      <div style="height: 0.1vw;margin-top: 0.1vw"></div>
    </div>
    </div>
  </div>
    <el-row class="layout2_1">
      <el-col :span="8"/>
      <el-col :span="8">
      <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
      />
      </el-col>
      <el-col :span="8"/>

    </el-row>
  <el-dialog title="提示" v-model="dialogVisible" width="40%">
    <el-form :model="form" label-width="10vw">
      <el-form-item label="题目">
        <el-input v-model="form.title" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.message" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-if="this.formMsg.role==1" v-model="form.author" style="width: 80%"></el-input>
        <el-input v-if="this.formMsg.role==2" v-model="form.author" :model-value="this.formMsg.nickName" readonly:true  style="width: 80%;"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-input v-model="form.type" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="发布日期">
        <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="文件上传">
        <el-upload
            ref="upload"
            action="http://localhost:9084/files/upload" :on-success="filesUploadSuccess"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div >
              jpg/png files with a size less than 10MB.
            </div>
          </template>
        </el-upload>
      </el-form-item>
      </el-form>
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </template>
  </el-dialog>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "WebPage2",
  data(){
    return  {
      form:{},
      dialogVisible:false,
      search:'',
      currentPage:1,
      pageSize:10,
      total:0,
      formMsg:{},
      tableData:[
      ]
    }
  },
  created() {
    let str=sessionStorage.getItem("user")||"{}"
    this.formMsg=JSON.parse(str);
    request.get("/user/"+this.formMsg.id).then(res=>{
      if(res.code==='0'){
        this.formMsg=res.data;
      }
    })
    this.load();
  },
  methods:{
    filesUploadSuccess(res){
      this.form.url=res.data;
      console.log(res);
    },
    load() {
      request.get("/webpage2", {
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
          searchPageId:this.$route.query.pageId
        }
      }).then(res=>{
        console.log(res);
        this.tableData=res.data.records;
        this.total=res.data.total;
      })
    },
    add(){
      this.form={};
      this.form.author=this.formMsg.nickName;
      this.form.pageId=this.$route.query.pageId;
      this.dialogVisible=true;
    },
    handDelete(id){
      request.delete("/webpage2/"+id).then(res=>{
        if(res.code=='0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
      })
      this.load();
    },
    save(){
      if(this.form.id){
        request.put("/webpage2", this.form).then(res=>{
          console.log(res);
          if(res.code=='0'){
            this.$message({
              type:"success",
              message:"修改成功"
            })
            if(this.$refs['upload']){
              this.$refs['upload'].clearFiles();
            };
          }else{
            this.$message({
              type:"error",
              message:res.msg
            })
          }
        })
      }
      else {
        request.post("/webpage2", this.form).then(res=>{
          console.log(res);
          this.$message({
            type:"success",
            message:"新增成功"
          })
        })
      }
      this.load();
      this.dialogVisible=false;
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.load();
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.load();
    },
    handleEdit(item){
      this.form=JSON.parse(JSON.stringify(item));
      this.dialogVisible=true;
    },
    filesDownload(id){
      request.get("/webpage2/download/"+id, {
      }).then(res=>{
        console.log(res);
        window.location.href = res.url;
      })
    }
  }
}
</script>

<style scoped>
.layout2{
  width: 100%;
  background-color: 	#F5F5F5;
  padding-left: 10%;
  padding-right: 10%;

}
.layout2_1{
  width: 100%;
  background-color: 	#F5F5F5;
}
.el-button1{
  background-color:#4E798C;
  color: #FFFFFF;
}
.el-button1:hover{
  color:#000000;
  background-color: #FFFFFF;
}
</style>